<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>云上医疗系统用户登录</title>
		<link href="css/login.css" rel="stylesheet" rev="stylesheet" type="text/css" media="all" />
		<script type="text/javascript" src="js/jquery-3.3.1.js"></script>
		<script type="text/javascript" src="js/jquery.SuperSlide.js"></script>
		<!-- <script type="text/javascript" src="js/Validform_v5.3.2_min.js"></script> -->





		 <script type="text/javascript">
		 
		 
		/*  	$(function(){
		 		document.getElementById('num').src = 'vcode.jpg?'+(new Date()).getTime()
		 		
		 	}); */
		 	
			$(document).ready(function() {
				var $tab_li = $('#tab ul li');
				
				$tab_li.click(function() {
					$(this).addClass('selected').siblings().removeClass('selected');
					var index = $tab_li.index(this);
					$('div.tab_box > div').eq(index).show().siblings().hide();
				
				});
				
				
				
				
			});
		</script>
		<script type="text/javascript">
			$(function() {
				
				/*用户登录信息验证*/
				$("#stu_username_hide").focus(function() {
					var username = $(this).val();
					if(username == '输入用户名') {
						$(this).val('');
					}
				});
				$("#stu_username_hide").focusout(function() {
					var username = $(this).val();
					if(username == '') {
						$(this).val('输入用户名');
					}
				});
				$("#stu_password_hide").focus(function() {
					var username = $(this).val();
					if(username == '输入密码') {
						$(this).val('');
					}
				});
				$("#stu_password_hide").focusout(function() {
					var username = $(this).val();
					if(username == '') {
						$(this).val('输入密码');
					}
				});
				$("#stu_code_hide").focus(function() {
					var username = $(this).val();
					if(username == '输入验证码') {
						$(this).val('');
					}
				});
				$("#stu_code_hide").focusout(function() {
					var username = $(this).val();
					if(username == '') {
						$(this).val('输入验证码');
					}
				});

				/*医生登录信息验证*/
				$("#tea_username_hide").focus(function() {
					var username = $(this).val();
					if(username == '输入职工号') {
						$(this).val('');
					}
				});
				$("#tea_username_hide").focusout(function() {
					var username = $(this).val();
					if(username == '') {
						$(this).val('输入职工号');
					}
				});
				$("#tea_password_hide").focus(function() {
					var username = $(this).val();
					if(username == '输入密码') {
						$(this).val('');
					}
				});
				$("#tea_password_hide").focusout(function() {
					var username = $(this).val();
					if(username == '') {
						$(this).val('输入密码');
					}
				});
				$("#tea_code_hide").focus(function() {
					var username = $(this).val();
					if(username == '输入验证码') {
						$(this).val('');
					}
				});
				$("#tea_code_hide").focusout(function() {
					var username = $(this).val();
					if(username == '') {
						$(this).val('输入验证码');
					}
				});
				
				
				/*药商登录信息验证*/
				$("#sec_username_hide").focus(function() {
					var username = $(this).val();
					if(username == '输入药商号') {
						$(this).val('');
					}
				});
				$("#sec_username_hide").focusout(function() {
					var username = $(this).val();
					if(username == '') {
						$(this).val('输入药商号');
					}
				});
				$("#sec_password_hide").focus(function() {
					var username = $(this).val();
					if(username == '输入密码') {
						$(this).val('');
					}
				});
				$("#sec_password_hide").focusout(function() {
					var username = $(this).val();
					if(username == '') {
						$(this).val('输入密码');
					}
				});
				$("#sec_code_hide").focus(function() {
					var username = $(this).val();
					if(username == '输入验证码') {
						$(this).val('');
					}
				});
				$("#sec_code_hide").focusout(function() {
					var username = $(this).val();
					if(username == '') {
						$(this).val('输入验证码');
					}
				});
				
				
				
				
				
			});
			
			
			function checkUserNameGet() {
				var name = $("#stu_username_hide").val();
			    var span = $("#s");
				$.get("loginName",{"username":name},
				function(data){
					if(data == "y") {
						 span.css("color","green").html("用户名正确");
					}else {
						span.css("color","red").html("用户名错误");
					}
			   });
			}
			
			 
		</script>
		
	</head>

	<body>
		<div id="tab">
			<ul class="tab_menu">
				<li class="selected">用户登录</li>
				<li>医生登录</li>
				<li>药商登录</li>
			</ul>
			<div class="tab_box">
				<!-- 用户登录开始 -->
				<div>
					<div class="stu_error_box" id="ss"><b>${msg}</b></div>
					<form action="loginAction" method="get" class="stu_login_error" id="tolgin"  onsubmit="return lgin()">
						<div id="username">
							<label>用户名：</label>
							<input type="text" id="stu_username_hide" name="username" placeholder="输入用户名" value="${name}" nullmsg="用户名不能为空！" onblur="checkUserNameGet()" datatype="s6-18" errormsg="用户名范围在6~18个字符之间！" sucmsg="用户名验证通过！" />
							<br>
						 <%-- <span id="s" style="color: red;">${msg}</span>  --%>
							<!--ajaxurl="demo/valid.jsp"-->
						</div>
						<div id="password">
							<label>密&nbsp;&nbsp;&nbsp;码：</label>
							<input type="password" id="stu_password_hide" name="password" placeholder="输入密码" nullmsg="密码不能为空！" datatype="*6-16" errormsg="密码范围在6~16位之间！" sucmsg="密码验证通过！"  } />
						</div>
						<div id="code">
							<label>验证码：</label>
							<input type="text" id="stu_code_hide" name="code" value="输入验证码" nullmsg="验证码不能为空！" datatype="*4-4" errormsg="验证码有4位数！" sucmsg="验证码验证通过！" />
							<a href="javascript:;" title="点击更换" alt="验证码占位图"
                               onclick="document.getElementById('num').src = 'vcode.jpg?'+(new Date()).getTime()">
                                <img id="num" src="vcode.jpg"/> </a> </div>
						<div id="remember">
							<input type="checkbox" name="remember"/>
							<label>记住密码</label> | <label>没有账号？<a href="register.jsp">注册</a></label>
						</div>
						<div id="login">
							<button type="submit"  >登录</button>
						</div>
					</form>
				</div>
				<!-- 用户登录结束-->
				<!-- 医生登录开始-->
				<div class="hide">
					<div class="tea_error_box"></div>
					<form action="" method="post" class="tea_login_error">
						<div id="username">
							<label>职工号：</label>
							<input type="text" id="tea_username_hide" name="username" value="输入职工号" nullmsg="职工号不能为空！" datatype="s6-18" errormsg="职工号范围在6~18个字符之间！" sucmsg="职工号验证通过！" />
							<!--ajaxurl="demo/valid.jsp"-->
						</div>
						<div id="password">
							<label>密&nbsp;&nbsp;&nbsp;码：</label>
							<input type="password" id="tea_password_hide" name="password" value="输入密码" nullmsg="密码不能为空！" datatype="*6-16" errormsg="密码范围在6~16位之间！" sucmsg="密码验证通过！" />
						</div>
						<div id="code">
							<label>验证码：</label>
							<input type="text" id="tea_code_hide" name="code" value="输入验证码" nullmsg="验证码不能为空！" datatype="*4-4" errormsg="验证码有4位数！" sucmsg="验证码验证通过！" />
							<img src="images/captcha.jpg" title="点击更换" alt="验证码占位图" /> </div>
						<div id="remember">
							<input type="checkbox" name="remember"/>
							<label>记住密码</label> | <label>没有账号？<a href="register.html">注册</a></label>
						</div>
						<div id="login">
							<button type="button" >登录</button>
						</div>
					</form>
				</div>
				<!-- 医生登录结束-->
				<!-- 药商登录开始-->
				<div class="hide">
					<div class="sec_error_box"></div>
					<form action="" method="post" class="sec_login_error">
						<div id="username">
							<label>药商号：</label>
							<input type="text" id="sec_username_hide" name="username" value="输入药商号" nullmsg="药商号不能为空！" datatype="s6-18" errormsg="药商号范围在6~18个字符之间！" sucmsg="药商号验证通过！" />
							<!--ajaxurl="demo/valid.jsp"-->
						</div>
						<div id="password">
							<label>密&nbsp;&nbsp;&nbsp;码：</label>
							<input type="password" id="sec_password_hide" name="password" value="输入密码" nullmsg="密码不能为空！" datatype="*6-16" errormsg="密码范围在6~16位之间！" sucmsg="密码验证通过！" />
						</div>
						<div id="code">
							<label>验证码：</label>
							<input type="text" id="sec_code_hide" name="code" value="输入验证码" nullmsg="验证码不能为空！" datatype="*4-4" errormsg="验证码有4位数！" sucmsg="验证码验证通过！" />
						
							<a href="javascript:;" title="点击更换" alt="验证码占位图"
                               onclick="document.getElementById('num').src = 'vcode.jpg?'+(new Date()).getTime()">
                                <img id="num" src="images/vcode.jpg"/> </a></div>
						<div id="remember">
							<input type="checkbox" name="remember"/>
							<label>记住密码</label> | <label>没有账号？<a href="register.html">注册</a></label>
						</div>
						<div id="login">
							<button type="submit">登录</button>
							
						</div>
					</form>
				</div>
				<!-- 药商登录结束-->
			</div>
		</div>
		<div class="bottom">©2014 Leting
			<a href="javascript:;" target="_blank">关于</a> <span>京ICP证030173号</span> More Templates
			<a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from
			<a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a><img width="13" height="16" src="images/copy_rignt_24.png" /></div>
		<div class="screenbg">
			<ul>
				<li>
					<a href="javascript:;"><img src="images/bg1.jpg"/></a>
				</li>
				<li>
					<a href="javascript:;"><img src="images/bg2.jpg"/></a>
				</li>
				<li>
					<a href="javascript:;"><img src="images/bg3.jpg"/></a>
				</li>
			</ul>
		</div>
		
	<script type="text/javascript">
		function lgin(){
		
			 var v1 = document.getElementById('stu_username_hide').value;
			 var v2 = document.getElementById('stu_password_hide').value;
			 var v3 = document.getElementById('stu_code_hide').value;
			 var span = $("#ss");
			 if(v1.length==0){
				 span.html("用户名不能为空");
				 return false;
			 }else if(v1.length<5 ||v1.length>20){
				 span.html("用户名长度不可超过5-20");
				 return false;
			 }
			 if(v2.length==0){
				 span.html("密码不能为空");
				 return false;
			 }else if(v2.length<6 ||v1.length>20){
				 span.html("密码长度不可超过6-20");
				 return false;
			 }
			 if(v3.length==0){
				 span.html("验证码不能为空");
				 return false;
			 }else if(v3.length != 4){
				 span.html("验证码为4位字符");
				 return false;
			 }
			 document.getElementById("tolgin").submit();
		 }
		</script>
		
		<link rel="stylesheet" href="http://lee.dkfirst.cn/lee_loading.css">
 		<script src="http://lee.dkfirst.cn/lee_loading.js"></script>
 		
 		<script>
 		//获取浏览器页面可见高度和宽度  
 		var _PageHeight = document.documentElement.clientHeight,
 		    _PageWidth = document.documentElement.clientWidth;
 		//计算loading框距离顶部和左部的距离（loading框小部件的宽度为90px，高度为90px）  
 		var _LoadingTop = _PageHeight > 90 ? (_PageHeight - 90) / 2 : 0,
 		    _LoadingLeft = _PageWidth > 90 ? (_PageWidth - 90) / 2 : 0;
 		//在页面未加载完毕之前显示的loading Html自定义内容  
 		var _LoadingHtml = '<div id="loadingDiv" style="position:absolute;left:0;width:100%;height:' + _PageHeight + 'px;top:0;background:#FFFFFF;opacity:1.0;
 		                    filter:alpha(opacity=80);z-index:10000;">
 		                    <div class="spinner" style="position: top: 60px; margin:' + _LoadingTop + 'px auto ;"></div></div>';
 		//呈现loading效果  
 		document.write(_LoadingHtml);

 		//监听加载状态改变  
 		document.onreadystatechange = completeLoading;

 		//加载状态为complete时移除loading效果  
 		function completeLoading() {
 		    if (document.readyState == "complete") {
 		        //此引用了Jquery，页面没有导jq包的，需要自行加入
 		        $("#loadingDiv").fadeOut(1500);
 		    }
 		}

 	
 		</script>
 		<style>
 		.spinner {
 width: 60px;
 height: 60px;
 background-color: #67CF22;
 
 margin: 100px auto;
 -webkit-animation: rotateplane 1.2s infinite ease-in-out;
 animation: rotateplane 1.2s infinite ease-in-out;
 
}
 
@-webkit-keyframes rotateplane {
 0% { -webkit-transform: perspective(120px) }
 50% { -webkit-transform: perspective(120px) rotateY(180deg) }
 100% { -webkit-transform: perspective(120px) rotateY(180deg) rotateX(180deg) }
}
 
@keyframes rotateplane {
 0% {
 transform: perspective(120px) rotateX(0deg) rotateY(0deg);
 -webkit-transform: perspective(120px) rotateX(0deg) rotateY(0deg)
 } 50% {
 transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg);
 -webkit-transform: perspective(120px) rotateX(-180.1deg) rotateY(0deg)
 } 100% {
 transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
 -webkit-transform: perspective(120px) rotateX(-180deg) rotateY(-179.9deg);
 }
}

</style>
	</body>

</html>